<template>
	<view class="tm-table">
		
		<scroll-view scroll-x :scroll-y="height_s?true:false" 
			class="tm-table-scroll tm-table-scroll-body fulled" :style="{
			height:height_s?`${height_s}px`:'auto'
			}">
			<view
				class="  tm-table-scroll-header   " >
				<tm-row v-if="listdata.header.length>0" preatClass="tm-table-header " style="white-space: nowrap;">
					<block v-for="(item,index) in listdata.header" :key="index">
						<tm-col :grid="item['grid']?item.grid:col" 
						:color="(listdata.headerBgcolor?listdata.headerBgcolor:item.color)+ (black_tmeme?' bk ':'')" 
						custom-class="" :padding="5">
							<view class="text-size-s text-weight-b text-overflow-1 flex-center" style="white-space: initial;line-height: 36px;height: 36px;">
								{{item[rangKey]}}
							</view>
						</tm-col>
					</block>
					
				</tm-row>
			</view>
			<block v-for="(item,index) in listdata.col" :key="index">
				<tm-row v-if="listdata.col.length>0" preatClass="tm-table-header" style="white-space: nowrap;">
					
					<block v-for="(item2,index2) in item" :key="index2">
						<tm-col :grid="item2['grid']?item2['grid']:(listdata.header[index2]['grid']?listdata.header[index2]['grid']:col)" 
						:color="item2.color?item2.color:(listdata.header[index2].color?listdata.header[index2].color+' text':(item2.color?item2.color+' text':((index+1)%2?activeCellColorRow+' text':'white'))) + (black_tmeme?' bk ':'')">
							<view @click="onclick(index,index2,item2)" class="text-size-s   border-grey-lighten-3-b-1 flex-center" :class="black_tmeme?' bk ':''" style="white-space: initial;line-height: 36px;height: 36px;">
								<slot name="cell" :data="{parentIndex:index,childrenIndex:index2,data:item2}">
									{{item2[rangKey]}}
								</slot>
							</view>
						</tm-col>
					</block>
				</tm-row>
			</block>
		</scroll-view>
	</view>
</template>

<script>
	/**
	 * 表格
	 * @property {Number} height = [] 默认：0，表格的整体高度，如果设定了高度，超过后变为滚动。
	 * @property {Number} col = [] 默认：0，默认的列宽，记住是1-12列
	 * @property {String} activeCellColorRow = [] 默认：blue，默认高亮的行颜色
	 * @property {String} rangKey = [] 默认：text，list对象时读取文本的字段，默认text
	 * @property {Object} list = [] 默认：{}，list数据格式见文档
	 * @example <tm-table :list="list2"></tm-table>
	 */
	import tmRow from "@/tm-vuetify/components/tm-row/tm-row.vue"
	import tmCol from "@/tm-vuetify/components/tm-col/tm-col.vue"
	export default {
		components:{tmRow,tmCol},
		name: "tm-table",
		props: {
			height: {
				type: Number,
				default: 0
			},
			black:{
				type:Boolean|String,
				default:null
			},
			// 默认的列宽
			col: {
				type: Number,
				default: 3
			},
			// 默认高亮的单元格。
			activeCellColorRow:{
				type:String,
				default:'primary'
			},
			// 对象时读取文本的字段，默认text
			rangKey:{
				type:String,
				default:'text'
			},
			list: {
				type: Object,
				default: () => {
					return {};
				}
			}
		},
		data() {
			return {
				scrollx_px: 0,
				scrollx_obj:null,
				list_default: {
					header: [], //头部数据
					col:[],//行的数据
					headerBgcolor:'primary' ,//头部的背景颜色
				}
			};
		},
		computed: {
			black_tmeme: function() {
				if (this.black !== null) return this.black;
				return this.$tm.vx.state().tmVuetify.black;
			},
			listdata: function() {
				let list = {
					...this.list_default,
					...this.list
				};
				return list;
			},
			height_s: function() {
				return uni.upx2px(this.height);
			}
		},
		methods: {
			onclick(index,index2,item){
				this.$emit("click",{row:index,col:index2,data:item})
			}
		}
	}
</script>

<style lang="less" scoped>
	.tm-table {
		.tm-table-scroll-header {
			position: relative;
			z-index: 2;
			.tm-header-body{
				
			}
		}

		.tm-table-scroll-body {
			position: relative;
			z-index: 1;
		}

		
	}
	.tm-table-header {
		flex-flow: nowrap !important;
		white-space: nowrap !important;
		display: flex;
		flex-flow: row nowrap;
		
		.tm-col{
			flex-shrink: 0;
			height: 100%;
		}
	}
</style>
